<template>
  <div class="list">
    <div class="card" v-for="(v, i) in obj" :key="i">
      <input v-model="v.checked" type="checkbox" name="" id="" />
      <img :src="v.img" alt="" />
      <article>
        <p>{{ v.name }}</p>
        <ul>
          <li>￥{{ v.price }}</li>
          <li>
            <button @click="v.num > 0 ? v.num-- : v.num">-</button>
            <span>{{ v.num }}</span>
            <button @click="v.num++">+</button>
          </li>
        </ul>
      </article>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  props: {
    obj: Object,
  },
  setup(props, { emit }) {
    return {};
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.list {
  width: 100%;
}
button{ 
    width: 30px;
    height: 25px;
}
.card {
  display: flex;
  align-items: center;
  width: 100%;
  height: 120px;
  background-color: #fff;
  img {
    width: 30%;
    height: 100%;
  }
}
input {
  width: 34px;
  height: 34px;
}
</style>
